<template>
    <div class="bar_box"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'MyAppMyBar',

    data() {
        return {

        };
    },

    mounted() {
        let myBar = echarts.init(document.querySelector('.bar_box'))
        var item = {
            name: '',
            value: 1400,
            // 空白柱的背景色
            itemStyle: {
                color: '#254065'
            },
            tooltip: {
                // 额外附加到浮层的 css 样式  不显示
                extraCssText: 'opacity:0'
            }
        }
        let option = {
            tooltip: {
                trigger: 'item'
            },
            // 组件离容器的距离
            grid: {
                left: '0%',
                right: '4%',
                bottom: '3%',
                top: '3%',
                containLabel: true,
                show: true,
                borderColor: '#00d7f0'
            },
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#00f5f8' // 0% 处的颜色
                }, {
                    offset: 1, color: '#006fd2' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            },
            xAxis: {
                type: 'category',
                data: ['河南', '郑州', '深圳', '广州', '宝安', '', '......', '', '江苏', '浙江', '上海', '北京', '天津'],
                // 底层坐标轴刻度
                axisTick: {
                    show: false
                },
                // 底层坐标轴刻度的文字颜色
                axisLabel: {
                    color: '#00d7f0'
                },
                axisLine: {
                    lineStyle: {
                        color: '#00d7f0'
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisTick: {
                    show: false
                },
                // 底层坐标轴刻度的文字颜色
                axisLabel: {
                    color: '#00d7f0'
                },
                // 坐标轴底层轴线颜色
                axisLine: {
                    lineStyle: {
                        color: '#00d7f0'
                    }
                },
                // 坐标轴在 grid 区域中的分隔线。
                splitLine: {
                    lineStyle: {
                        color: '#00d7f0'
                    }
                }
            },
            series: [
                {
                    name: '直接访问',
                    data: [2100, 1900, 1800, 1700, 1600, item, item, item, 1200, 1100, 1000, 900, 800],
                    type: 'bar',
                }
            ]
        };
        myBar.setOption(option)
        window.addEventListener('resize', function () {
            myBar.resize()
        })
    },

    methods: {

    },
};
</script>

<style lang="scss" scoped>

</style>